<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人技术博客系统 - 登录</title>
    <link rel="stylesheet" href="./static/css/login.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="logo">
            <img src="./static/images/logo.png">
        </div>
        <h1 class="system-name">个人技术博客系统（Personal Technical Blog System）</h1>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 系统简介区域 -->
        <div class="system-intro">
            <h2 class="intro-title">系统简介</h2>
            <p class="intro-text">个人技术博客系统（PTBS）是一个专为开发者打造的综合性技术内容管理平台，集内容创作、技术分享与资源整合于一体。</p>
            <ul class="intro-features">
                <li>在这里，您可以了解开发者的成长历程与技术心得，通过开发者日志追踪系统迭代足迹</li>
                <li>使用实用工具箱与精选前端网页资源，提升工作效率与创作灵感</li>
                <li>记录生活随笔与兴趣探索，留存碎片化思考与创意火花</li>
                <li>更能通过博客系统后台管理功能，轻松创建、编辑和发布个人技术文章，打造专属的线上技术空间</li>
            </ul>
        </div>
        
        <!-- 登录表单区域 -->
        <div class="login-container">
            <h2 class="login-title">系统登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" id="username" class="form-input" placeholder="请输入用户名" required>
                </div>
                
                <div class="form-group">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" id="password" class="form-input" placeholder="请输入密码" required>
                </div>

                <div class="form-group">
                    <label for="captcha" class="form-label">验证码</label>
                    <div class="captcha-container">
                        <input type="text" id="captcha" class="form-input" placeholder="请输入验证码" required>
                        <div class="captcha-image-container">
                            <img id="captchaImage" src="" title="点击刷新验证码" alt="验证码">
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="login-button">登 录</button>
                <div class="login-tip">注：请向系统开发者获取用户名和密码</div>
                <div class="error-message" id="errorMessage"></div>
                <div class="success-message" id="successMessage"></div>
            </form>
        </div>
    </div>

    <!-- 协议链接区域 -->
    <div class="agreement-links">
        <a id="termsLink">使用协议</a>
        <a id="privacyLink">隐私协议</a>
    </div>
    
    <!-- 页脚信息 -->
    <div class="footer">
        <p> © 2025 个人技术博客系统(PTBS) | 版权所有</p>
    </div>
       
    <!-- 使用协议弹窗 -->
    <div class="modal-backdrop" id="termsModal">
        <div class="modal-content">
            <button class="close-btn">&times;</button>
            <h3 class="modal-title">使用协议</h3>
            <div class="agreement-content">
                <p>欢迎使用个人技术博客系统（PTBS）。本系统账号由系统开发者统一分配及管理，使用前请仔细阅读以下条款：</p>
                <p>1. 您的账号密码由系统开发者专属提供，仅限您本人使用，严禁转借、共享或泄露给任何第三方。</p>
                <p>2. 请妥善保管账号信息，如发现账号异常使用或密码泄露，应立即联系系统开发者（1509054114@qq.com）进行处理。</p>
                <p>3. 您在系统内发布的内容需遵守法律法规及公序良俗，不得包含违法、侵权、色情、暴力等不良信息。</p>
                <p>4. 系统开发者有权对账号使用行为进行监督，如发现违规使用，可暂停或终止账号权限。</p>
                <p>5. 您通过本账号进行的所有操作均视为您本人行为，需承担相应法律责任。</p>
                <p>6. 系统开发者可根据实际需求更新本协议，更新后将通过系统公告通知，继续使用账号即视为接受新条款。</p>
            </div>
        </div>
    </div>
    
    <!-- 隐私协议弹窗 -->
    <div class="modal-backdrop" id="privacyModal">
        <div class="modal-content">
            <button class="close-btn">&times;</button>
            <h3 class="modal-title">隐私协议</h3>
            <div class="agreement-content">
                <p>个人技术博客系统（PTBS）重视用户隐私保护，现就账号使用相关隐私事宜说明如下：</p>
                <p>1. 系统收集的用户信息仅限于开发者分配的账号标识，用于身份验证及使用记录追踪。</p>
                <p>2. 您在系统内的操作记录（如发布内容、编辑行为等）将被系统留存，仅用于系统运行维护及问题排查。</p>
                <p>3. 除法律法规要求或获得您的明确授权外，系统不会向任何第三方披露您的账号信息及使用记录。</p>
                <p>4. 系统采用技术措施保护数据安全，但请您注意，网络传输无法完全避免安全风险，请勿在系统内留存敏感个人信息。</p>
                <p>5. 如您需注销账号或删除相关数据，可向系统开发者（1509054114@qq.com）提出申请，经确认后将进行相应处理。</p>
                <p>6. 使用本系统即表示您同意上述隐私保护条款，系统开发者保留对隐私政策的解释权。</p>
            </div>
        </div>
    </div>
    
    <script src="./static/js/login.js"></script>
    <!-- 验证码 -->
    <script src="./static/js/captcha.js"></script>
    <script>
        // 这个标签内的js代码的作用是协议弹窗显示的相关代码
        // 获取元素
        const termsLink = document.getElementById('termsLink');
        const privacyLink = document.getElementById('privacyLink');
        const termsModal = document.getElementById('termsModal');
        const privacyModal = document.getElementById('privacyModal');
        const closeBtns = document.querySelectorAll('.close-btn');
        const modals = document.querySelectorAll('.modal-backdrop');

        // 打开弹窗函数
        function openModal(modal) {
            modal.style.display = 'flex';
        }

        // 关闭弹窗函数
        function closeModal(modal) {
            modal.style.display = 'none';
        }

        // 绑定打开事件
        termsLink.addEventListener('click', () => openModal(termsModal));
        privacyLink.addEventListener('click', () => openModal(privacyModal));

        // 绑定关闭按钮事件
        closeBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => closeModal(modals[index]));
        });

        // 点击弹窗外部关闭
        modals.forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal(modal);
                }
            });
        });
    </script>
</body>
</html>